<template>
  <div class="app-container">
    <el-form size="small" :inline="true" :model="searchForm" class="demo-form-inline">
      <el-form-item label="关键词">
        <el-input v-model="searchForm.keyword" clearable placeholder="搜索" />
      </el-form-item>
      <el-form-item label="客户端">
        <el-select v-model="searchForm.platform" placeholder="请选择客户端" clearable>
          <el-option label="安卓" value="android" />
          <el-option label="IOS" value="ios" />
          <el-option label="H5" value="h5" />
          <el-option label="管理后台" value="manager" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="search">查询</el-button>
        <el-button title="添加" type="success" @click="$router.push({path:'/package/form'})">添加</el-button>
      </el-form-item>
    </el-form>

    <el-table
      v-loading="listLoading"
      :data="list"
      :element-loading-text="LoadingText"
      border
      fit
      highlight-current-row
    >
      <el-table-column align="center" label="#" width="95">
        <template v-slot:default="{scope,row}">
          {{ row.id }}
        </template>
      </el-table-column>

      <el-table-column label="客户端" width="100">
        <template v-slot:default="{scope,row}">
          <el-tag>{{ platformType[row.platform] || "" }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="版本号" width="100">
        <template v-slot:default="{scope,row}">
          {{ row.version }}
        </template>
      </el-table-column>
      <el-table-column label="下载地址" width="100" align="center">
        <template v-slot:default="{scope,row}">
          <el-tag @click="copyText(row.url)">复制</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="发布环境" width="100">
        <template v-slot:default="{scope,row}">
          <el-tag :type="row.is_test == 1 ? 'info' : 'success' ">{{ row.is_test == 1 ? "内部测试" : "公网" }}</el-tag>
        </template>
      </el-table-column>

      <el-table-column label="强制更新" width="120" align="center">
        <template v-slot:default="{scope,row}">
          <span>{{ row.is_force == 1 ? '是' : '否' }}</span>
        </template>
      </el-table-column>
      <el-table-column label="热资源" width="100" align="center">
        <template v-slot:default="{scope,row}">
          <span>{{ row.wgt_flag == 1 ? '是' : '否' }}</span>
          <span v-if="row.wgt_flag==1">（v{{ row.wgt_version}}）</span>
        </template>
      </el-table-column>
      <el-table-column label="修改时间" width="180">
        <template v-slot:default="{scope,row}">
          {{ row.updated_at }}
        </template>
      </el-table-column>
      <el-table-column label="更新内容" width="400">
        <template v-slot:default="{scope,row}">
          <p style="white-space: pre-line">{{ row.tips }}</p>
        </template>
      </el-table-column>
      <el-table-column label="状态" width="100" align="center">
        <template v-slot:default="{scope,row}">
          <el-tooltip :content="row.status ? '启用' : '禁用' " placement="top">
            <el-switch
              v-model="row.status"
              active-color="#13ce66"
              inactive-color="#ff4949"
              :active-value="1"
              :inactive-value="0"
              @change="changeStatus(row)"
            >
            </el-switch>
          </el-tooltip>

        </template>
      </el-table-column>

      <el-table-column align="center" prop="created_at" label="操作"  width="150">
        <template v-slot:default="{scope,row}">
          <el-row>
            <el-button
              title="推送更新"
             v-if="row.platform=='h5'||row.platform=='manager'"
              size="mini"
              style="margin-right: 10px"
              type="primary"
              icon="el-icon-position"
              circle
              @click="handlePush(row)"
            />
            <el-button
              size="mini"
              style="margin-right: 10px"
              type="primary"
              icon="el-icon-edit"
              circle
              @click="$router.push({path:'/package/form',query:{id:row.id}})"
            />

            <el-popconfirm
              title="确认删除该版本吗？"
              @confirm="handleDelete(row)"
            >
              <el-button
                size="mini"
                slot="reference"
                type="danger"
                icon="el-icon-delete"
                circle
              />
            </el-popconfirm>


          </el-row>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="listQuery.page"
      :limit.sync="listQuery.limit"
      @pagination="fetchData"
    />
  </div>

</template>

<script>
import api from '@/api/package'
import Pagination from '@/components/Pagination'

export default {
  components: {
    Pagination
  },
  filters: {
    statusFilter(status) {
      const statusMap = {
        '1': 'success',
        '0': 'gray',
        '-1': 'danger'
      }
      return statusMap[status]
    }
  },
  data() {
    return {
      LoadingText: '正在请求...',
      platformType: {
        android: '安卓APP',
        ios: 'IOS',
        h5: '移动端H5',
        manager: '管理后台'
      },
      list: null,
      listLoading: true,
      total: 0,
      listQuery: {
        page: 1,
        limit: 10,
        sort: ''
      },
      searchForm: {
        keyword: ''
      }
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    handleCategorySelect(category) {
      this.searchForm.category_id = category
    },
    fetchData() {
      this.listLoading = true
      api.getList(this.listQuery).then(response => {
        this.list = response.data.list
        this.total = response.data.total
        this.listLoading = false
      })
    },
    search() {
      this.listQuery.page = 1
      this.listQuery = Object.assign(this.listQuery, this.searchForm)
      this.fetchData()
    },
    handleDelete(row) {
      this.listLoading = true
      api.delete(row.id).then(res => {
        this.$message({
          message: '删除成功',
          type: 'success'
        })
        this.fetchData()
      })
    },
    handlePush(row) {
      this.$confirm('确定推送到服务器更新吗，版本号会自动+1？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.listLoading = true
        this.loadingText = '正在推送更新，请耐心等待...'
        api.push_update({ id: row.id }).then(res => {
          this.$message({
            message: res.msg,
            type: 'success',
            duration: 2000
          })
          this.fetchData()
        }).finally(() => {
          this.listLoading = false
          this.loadingText = '正在加载...'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        })
      })
    },
    changeStatus(row) {
      api.state(row.id).then(res => {
        this.$message({
          message: row.status ? '启用成功' : '禁用成功',
          type: 'success'
        })
      }).catch(error => {
        row.status = !row.status + 0
      })
    }
  }

}
</script>
